var myLayout, $westAccordion, $eastAccordion; // init global vars

	function resizeWidgets () {
		//myLayout.resizeAll();
		$westAccordion.accordion("resize");
		$eastAccordion.accordion("resize");
	};


	$(document).ready( function() {

		myLayout = $('body').layout({
			west__size:			300
		,	east__size:			300
			// RESIZE Accordion widget when panes resize
		,	west__onresize:		function () { $("#accordion1").accordion("resize"); }
		,	east__onresize:		function () { $("#accordion2").accordion("resize"); }
		});

		// ACCORDION - in the West pane
		$westAccordion = $("#accordion1").accordion({
			fillSpace:	true
		});
		
		// ACCORDION - in the East pane - in a 'content-div'
		$eastAccordion = $("#accordion2").accordion({
			fillSpace:	true
		,	active:		1
		});


		// THEME SWITCHER
		addThemeSwitcher('.ui-layout-north',{ top: '12px', right: '5px' });
		// if a new theme is applied, it could change the height of some content,
		// so call resizeAll to 'correct' any header/footer heights affected
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
		setTimeout( resizeWidgets, 1000 ); /* allow time for browser to re-render with new theme */

	});



